<template>
  <div class="container">
    <div class="user-info">
      <a-row>
        <a-col :span="3">
          <img :src="userInfo.avatar" v-if="userInfo.avatar" alt="" />
          <img src="../../assets//images/defult_avatar_url.jpg" alt="" v-else />
        </a-col>
        <a-col :span="7">
          <div>用户名：{{ userInfo.userName }}</div>
          <div>手机号：{{ userInfo.phonenumber }}</div>
        </a-col>
        <a-col :span="7">
          <div>实名认证：<a-tag color="#87d068">已认证</a-tag></div>
          <div>注册时间：{{ userInfo.createTime }}</div>
        </a-col>
        <a-col :span="7">
          <div>账号ID：{{ userInfo.userId }}</div>
          <div>积分：</div>
        </a-col>
      </a-row>
    </div>
    <div class="tabs">
      <span
        v-for="(item, index) in tabs"
        :key="index"
        class="mr-5"
        @click="handleTabs(item.name)"
        :class="tabsName == item.name ? 'spanActive' : ''"
        >{{ item.name }}</span
      >
    </div>
    <div v-if="tabsName == '我的钱包'">
      <!-- <a-row :gutter="15" class="mt-5">
      <a-col :xxl="6" :xl="12" :lg="12" :md="24">
        <div
          class="item"
          style="
            background: linear-gradient(180deg, #f6f7ff -3%, #f6f7ff 0, #ececff 100%, #ececff 0);
          "
        >
          <div>
            <div style="display: flex; align-items: center" class="mb-4">
              <img src="../../assets/images/ico_05.png" alt="" class="mr-4" />

              <div class="title">可提现金额</div>
            </div>
            <div>￥：58.00</div>
          </div>
          <div>
            <a-button type="primary">提现</a-button>
          </div>
        </div>
      </a-col>
      <a-col :xxl="6" :xl="12" :lg="12" :md="24">
        <div class="item">
          <div>
            <div style="display: flex; align-items: center" class="mb-4">
              <img src="../../assets/images/ico_01.png" alt="" class="mr-4" />

              <div class="title">今日订单总额</div>
            </div>
            <div>￥：58.00</div>
          </div>
        </div>
      </a-col>
    </a-row>
    <h1 class="mt-5" style="font-size: 20px">财务数据</h1>
    <a-row :gutter="15" class="mt-5">
      <a-col :xxl="6" :xl="12" :lg="12" :md="24">
        <div class="item">
          <div>
            <div style="display: flex; align-items: center" class="mb-4">
              <img src="../../assets/images/ico_01.png" alt="" class="mr-4" />
              <div class="title">订单总额</div>
            </div>
            <div>￥：58.00</div>
          </div>
        </div>
      </a-col>
      <a-col :xxl="6" :xl="12" :lg="12" :md="24">
        <div class="item">
          <div>
            <div style="display: flex; align-items: center" class="mb-4">
              <img src="../../assets/images/ico_02.png" alt="" class="mr-4" />

              <div class="title">提现总额</div>
            </div>
            <div>￥：58.00</div>
          </div>
        </div>
      </a-col>
      <a-col :xxl="6" :xl="12" :lg="12" :md="24">
        <div class="item">
          <div>
            <div style="display: flex; align-items: center" class="mb-4">
              <img src="../../assets/images/ico_03.png" alt="" class="mr-4" />

              <div class="title">冻结金额</div>
            </div>
            <div>￥：58.00</div>
          </div>
        </div>
      </a-col>
      <a-col :xxl="6" :xl="12" :lg="12" :md="24">
        <div class="item">
          <div>
            <div style="display: flex; align-items: center" class="mb-4">
              <img src="../../assets/images/ico_04.png" alt="" class="mr-4" />

              <div class="title">奖惩总额</div>
            </div>
            <div>￥：58.00</div>
          </div>
        </div>
      </a-col>
    </a-row>
    <h1 class="mt-5" style="font-size: 20px">今日数据</h1> -->
      <a-row :gutter="15" class="mt-5">
        <a-col :xxl="6" :xl="12" :lg="12" :md="24">
          <div class="item">
            <div>
              <div style="display: flex; align-items: center" class="mb-4">
                <img src="../../assets/images/ico_01.png" alt="" class="mr-4" />
                <div class="title">今日出票总金额（元）</div>
              </div>
              <div>￥：{{ userOrderStatisticsDay.total_moneys.toFixed(2) }}</div>
            </div>
          </div>
        </a-col>
        <a-col :xxl="6" :xl="12" :lg="12" :md="24">
          <div class="item">
            <div>
              <div style="display: flex; align-items: center" class="mb-4">
                <img src="../../assets/images/ico_02.png" alt="" class="mr-4" />

                <div class="title">今日接单（单 / 张）</div>
              </div>
              <div>
                {{ userOrderStatisticsDay.order_count || '0' }} /
                {{ userOrderStatisticsDay.seat_count || '0' }}
              </div>
            </div>
          </div>
        </a-col>
        <a-col :xxl="6" :xl="12" :lg="12" :md="24">
          <div class="item">
            <div>
              <div style="display: flex; align-items: center" class="mb-4">
                <img src="../../assets/images/ico_03.png" alt="" class="mr-4" />

                <div class="title">今日出票用时</div>
              </div>
              <div>{{ convertSecondsToHHMMSS(userOrderStatisticsDay.use_time) }}</div>
            </div>
          </div>
        </a-col>
        <a-col :xxl="6" :xl="12" :lg="12" :md="24">
          <div class="item">
            <div>
              <div style="display: flex; align-items: center" class="mb-4">
                <img src="../../assets/images/ico_04.png" alt="" class="mr-4" />

                <div class="title">今日中单率（%）</div>
              </div>
              <div>{{ userOrderStatisticsDay.order_rate }}%</div>
            </div>
          </div>
        </a-col>
      </a-row>
    </div>
    <div v-if="tabsName == '账户明细'">
      <a-tabs v-model:activeKey="activeKey">
        <a-tab-pane key="1" tab="提现收入">
          <a-table :columns="columns" :data-source="data"> </a-table>
        </a-tab-pane>
        <a-tab-pane key="2" tab="订单收入">Content of tab 2</a-tab-pane>
        <a-tab-pane key="3" tab="积分记录">Content of tab 3</a-tab-pane>
      </a-tabs>
    </div>
    <div v-if="tabsName == '个人数据'" class="pt-5">
      <a-card>
        <template #title>
          月数据统计
          <a-date-picker
            v-model:value="monthValue"
            picker="month"
            class="ml-5"
            @change="changeMonth"
            :allowClear="false"
          />
        </template>
        <a-row :gutter="15" v-if="personalData">
          <a-col :xxl="6" :xl="12" :lg="12" :md="24">
            <div class="item">
              <div>
                <div style="display: flex; align-items: center" class="mb-4">
                  <img src="../../assets/images/ico_01.png" alt="" class="mr-4" />
                  <div class="title">出票总金额（元）</div>
                </div>
                <div>
                  ￥：{{ (personalData.total_moneys ? personalData.total_moneys : 0).toFixed(2) }}
                </div>
              </div>
            </div>
          </a-col>
          <a-col :xxl="6" :xl="12" :lg="12" :md="24">
            <div class="item">
              <div>
                <div style="display: flex; align-items: center" class="mb-4">
                  <img src="../../assets/images/ico_02.png" alt="" class="mr-4" />

                  <div class="title">出票用时（均）</div>
                </div>
                <div>
                  {{ convertSecondsToHHMMSS(personalData.use_time ? personalData.use_time : 0) }}
                </div>
              </div>
            </div>
          </a-col>
          <a-col :xxl="6" :xl="12" :lg="12" :md="24">
            <div class="item">
              <div>
                <div style="display: flex; align-items: center" class="mb-4">
                  <img src="../../assets/images/ico_03.png" alt="" class="mr-4" />

                  <div class="title">单数（单） / 张数（张）</div>
                </div>
                <div>
                  {{ personalData.order_count ? personalData.order_count : 0 }} /
                  {{ personalData.seat_count ? personalData.seat_count : 0 }}
                </div>
              </div>
            </div>
          </a-col>
          <a-col :xxl="6" :xl="12" :lg="12" :md="24">
            <div class="item">
              <div>
                <div style="display: flex; align-items: center" class="mb-4">
                  <img src="../../assets/images/ico_04.png" alt="" class="mr-4" />

                  <div class="title">中单率（%）</div>
                </div>
                <div>{{ personalData.order_rate ? personalData.order_rate : 0 }} %</div>
              </div>
            </div>
          </a-col>
        </a-row>
        <a-table
          :columns="personalDataColumns"
          :data-source="personalDataList"
          bordered
          :pagination="false"
        >
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'total_moneys'">
              ￥：{{ record.total_moneys.toFixed(2) }}
            </template>
            <template v-if="column.key === 'order_rate'">
              {{ record.order_rate.toFixed(2) }}%
            </template>
            <template v-if="column.key === 'use_time'">
              {{ convertSecondsToHHMMSS(record.total_moneys) }}
            </template>
          </template>
        </a-table>
      </a-card>
    </div>
    <div v-if="tabsName == '个人设置'" class="pt-5">
      <a-card title="出票电话提醒设置 （中单后座位3分钟还未锁定，系统会给你电话提醒）">
        <p class="mb-5">
          <span style="display: flex; align-items: center">
            <span class="mr-5">接收手机号 </span>
            <a-input
              v-model:value="userInfo.phonenumber"
              placeholder="请输入接收手机号"
              style="width: 200px"
          /></span>
        </p>
        <p>来电号码：021-36181846</p>
      </a-card>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue'
import { useUserStore } from '@/stores/useUser'
import { getUserOrderStatisticsDay, getUserOrderStatisticsMonth } from '@/servers/user'
import { storeToRefs } from 'pinia'
const { userInfo, userId } = storeToRefs(useUserStore())
import { type UserOrderStatisticsDayObject, type UserOrderStatisticsDayData } from '@/ts-type/index'
import type { Dayjs } from 'dayjs'
import dayjs from 'dayjs'
import { convertSecondsToHHMMSS } from '@/utils/common'
const tabs = [
  { name: '我的钱包' },
  // { name: '收款账户' },
  // { name: '账户明细' },
  { name: '个人数据' },
  { name: '个人设置' }
]
const activeKey = ref('1')
const personalDataColumns = [
  {
    title: '日期',
    dataIndex: 'day',
    key: 'day'
  },
  {
    title: '出票总金额（元）',
    dataIndex: 'total_moneys',
    key: 'total_moneys'
  },
  {
    title: '出票用时（均）',
    dataIndex: 'use_time',
    key: 'use_time'
  },
  {
    title: '单数',
    key: 'order_count',
    dataIndex: 'order_count'
  },
  {
    title: '张数',
    dataIndex: 'seat_count',
    key: 'seat_count'
  },
  {
    title: '中单率（%）',
    dataIndex: 'order_rate',
    key: 'order_rate'
  }
]

let tabsName = ref('我的钱包')
function handleTabs(item: string) {
  tabsName.value = item
  if (item == '个人数据') {
    getUserOrderStatisticsMonthData()
  }
}

let userOrderStatisticsDay: UserOrderStatisticsDayData = reactive({
  all_total_moneys: 0.0,
  total_moneys: 0.0,
  order_count: 0,
  seat_count: 0,
  use_time: 0,
  order_rate: 0.0,
  day: null,
  orderCategory: null,
  dataList: null
})
// 我的钱包
function getData() {
  getUserOrderStatisticsDay({ userId: userId.value }).then(
    (response: UserOrderStatisticsDayObject) => {
      userOrderStatisticsDay = response.data
    }
  )
}
getData()
// 个人数据
const monthValue = ref<Dayjs>(dayjs())
const personalData = ref()
let personalDataList = reactive([])
function getUserOrderStatisticsMonthData() {
  getUserOrderStatisticsMonth({
    statisticsTime: dayjs(monthValue.value).format('YYYY-MM'),
    userId: userId.value
  }).then((response) => {
    console.log(response)
    personalData.value = response.data
    personalDataList = response.data.dataList ? response.data.dataList : []
  })
}
function changeMonth() {
  getUserOrderStatisticsMonthData()
}
</script>

<style lang="less" scoped>
.user-info {
  color: #606266;
  padding: 15px 0;
  .ant-row {
    display: flex;
    align-items: center;
    img {
      width: 100px;
      height: 100px;
      border-radius: 50%;
    }
    .ant-col > div {
      margin-bottom: 15px;
    }
  }
}
.tabs {
  padding: 15px 0;
  span {
    margin-right: 20px;
    padding: 4px 16px;
    border-radius: 18px;
    font-size: 14px;
    cursor: pointer;
    background: #f2f2f2;
    color: #666666;
  }
}
.spanActive {
  color: #429bc4 !important;
  background-color: #f2f3f8;
}
.item {
  background: linear-gradient(180deg, #f3f9fd, #e8f4fd);
  padding: 20px;
  border: none;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 24px;
  margin-bottom: 15px;
  img {
    width: 25px;
    height: 25px;
  }
  .title {
    font-size: 20px;
  }
}
</style>
